<template>
  <div class="add_docs">
    <el-dialog :model-value="modelValue" title="添加文档" width="20%" :before-close="handleClose">
      <el-input v-model="input" placeholder="标题" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="addDocsFn"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { addDocsApi, editDocsApi } from '@/service/api';
import { ElMessage } from 'element-plus';

const props = defineProps<{ modelValue: boolean; storeId: string; docData: any }>();
const emit = defineEmits(['update:modelValue', 'addsuccess']);
const input = ref('');
const isModify = ref(false);
const handleClose = () => {
  isModify.value = false;
  input.value = '';
  emit('update:modelValue', false);
};

const addDocsFn = async () => {
  let res: Res;
  if (isModify.value) {
    res = await editDocsApi({ id: props.docData._id, title: input.value });
  } else {
    res = await addDocsApi({ storeId: props.storeId, title: input.value });
  }
  if (res.code !== 201) return ElMessage.error(res.msg);
  ElMessage.success(res.msg);
  emit('addsuccess');
  handleClose();
};

defineExpose({ isModify, input });
</script>

<style scoped lang="less"></style>
